import * as THREE from "three";
import {AxesHelper, PCFSoftShadowMap} from "three";
import moonImg from "@/assets/imgs/moon.jpg";
import earthImg from "@/assets/imgs/earth.jpg";
import {CSS2DObject, CSS2DRenderer, DRACOLoader, GLTFLoader} from "three/addons";
import {gsap} from "gsap";
import {OrbitControls} from "three/addons/controls/OrbitControls.js";

export function init() {
  const width = window.innerWidth
  const height = window.innerHeight
  let bufArrays = []
  const scene = new THREE.Scene();
  scene.background = backgroundTexture()

  const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 2000);
  camera.position.set(15, 20, 15);
  camera.lookAt(0, 0, 0);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight - 40);
  document.getElementById('three').appendChild(renderer.domElement);
  const controls = new OrbitControls(camera, renderer.domElement);

  let bj = new THREE.TextureLoader().load()
  bj.mapping = THREE.EquirectangularReflectionMapping
  scene.background = bj
  scene.environment = bj


  function render() {
    requestAnimationFrame(render)
    renderer.render(scene, camera)
  }

  function backgroundTexture () {
    const canvas = document.createElement('canvas')
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    const ctx = canvas.getContext('2d')
    const gradient = ctx.createLinearGradient(0, 0, window.innerWidth, 0)
    gradient.addColorStop(0, '#4e22b7')
    gradient.addColorStop(1, '#3292ff')
    ctx.fillStyle = gradient
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    const canvasTexture = new THREE.CanvasTexture(canvas)
    return canvasTexture
  }
  render()

  let light = new THREE.DirectionalLight(0xffffff, 5)
  light.position.set(0, 0, 1)
  scene.add(light)
  let light2 = new THREE.DirectionalLight(0xffffff, 5)
  light.position.set(0, 0, -1)
  scene.add(light2)
  let light3 = new THREE.AmbientLight(0xffffff, 5)
  light.position.set(-1, 1, -1)
  scene.add(light3)


  let dLoader = new DRACOLoader()
  dLoader.setDecoderConfig({type: 'js'})
  dLoader.setDecoderPath('/draco/gltf');
  const loader = new GLTFLoader();
  loader.setDRACOLoader(dLoader);
  loader.load('/models/box.glb', gltf => {
    gltf.scene.traverse(child => {
      if (child.isMesh) {
        child.geometry.translate(0, 0.5, 0)
        const { array } = child.geometry.attributes.position
        bufArrays.push(array)
      }
    })
  })
  loader.load('/models/box1.glb', gltf => {
    gltf.scene.traverse(child => {
      if (child.isMesh) {
        child.geometry.scale(0.5, 0.5, 0.5)
        const { array } = child.geometry.attributes.position
        bufArrays.push(array)
      }
    })
  })
  loader.load('/models/sphere.glb', gltf => {
    gltf.scene.traverse(child => {
      if (child.isMesh) {
        child.geometry.translate(1, 0, 0)
        const { array } = child.geometry.attributes.position
        bufArrays.push(array)
      }
    })
  })

  // loader.load('/models/ft.glb', (gltf) => {
  //   gltf.scene.scale.set(2, 2, 2);
  //   gltf.scene.position.set(3, -20, 0)
  //   scene.add(gltf.scene)
  //   window.addEventListener("mousemove", (e) => {
  //       let x = (e.clientX / window.innerWidth) * 2 - 1;
  //       let y = (e.clientY / window.innerHeight) * 2 - 1;
  //       let timeline = gsap.timeline()
  //       timeline.to(gltf.scene.rotation, {
  //         duration:0.5,
  //         x:y,
  //         y:x,
  //       })
  //     }
  //   );
  // },);


}
